<template>
	<view class="record">
		<view class="record-box" v-if="listData.length">
			<view class="record-item" v-for="(item,index) in listData" @click="recordDs(item)">
				<view class="record-item-title">
					<view class="record-item-title-left">
						<view class="title-left-img">
							<image src="../../static/caifa/mulu.png" mode="widthFix"></image>
						</view>
						<view>{{item.createTime}}
						</view>
					</view>
					<uni-icons type="right" size="24" color="rgba(51, 51, 51, 0.4)"></uni-icons>
				</view>
				<view class="record-item-text">申请人：{{item.contacts}}</view>
				<view class="record-item-text">采伐地点：{{item.address}}</view>
				<view class="record-item-text">采伐面积：{{item.harvestArea}}亩</view>
				<view class="record-item-text">采伐蓄积：{{item.avgArea}}立方米
					<view class="result" :style="{color:v.color}" v-for="(v,i) in typeList" :key="i">
						<template v-if="item.flowProcess==v.value">{{v.label}}</template>
					</view>
				</view>
			</view>
		</view>
		<view class="noInfo" v-else>
			<i class="ksp-icon ksp-icon--zwsj"></i>
			暂无数据
		</view>
	</view>
</template>

<script>
	// import {
	// 	harvestInfolist
	// } from "../../http/api.js";
	// import ajax from "../../http/index.js";
	export default {
		data() {
			return {
				listData: [],
				typeList: [{
						value: 0,
						label: '提交申请',
						color: 'orange'
					},
					{
						value: 1,
						label: '提交上级',
						color: 'rgba(26, 123, 255, 1)'
					},
					{
						value: 2,
						label: '通过',
						color: 'green'
					},
					{
						value: 3,
						label: '退回下级',
						color: 'red'
					},
					{
						value: 4,
						label: '不通过',
						color: 'red'
					}
				]
			}
		},
		onLoad() {
			this.getdata()
		},
		methods: {
			async getdata() {
				let res = await this.muajax.harvestInfolist({
					isMyself: 1,
					loginEmployeeId: this.$store.state.user.employeeId
				});
				if (res.code == "0000") {
					this.listData = res.harvestVoList
				}
			},
			recordDs(item) {
				uni.navigateTo({
					url: `/pages/record-ds/record-ds?id=${item.id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.record {
		display: flex;
		height: 100%;

		.record-box {
			flex: 1;
			overflow: auto;
			padding: 0 22rpx;
		}

		.record-item {
			// height: 338rpx;
			background: #FFFFFF;
			border-bottom: 1px solid rgba(70, 70, 70, 0.1);
			padding-top: 30rpx;
			padding-bottom: 20rpx;

			.record-item-title {
				display: flex;
				justify-content: space-between;
				margin-bottom: 27rpx;

				.record-item-title-left {
					display: flex;
					align-items: center;

					.title-left-img {
						width: 51rpx;
						height: 51rpx;
						margin-right: 5rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}

			.record-item-text {
				padding-left: 18rpx;
				margin-bottom: 15rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 29rpx;
				color: rgba(51, 51, 51, .7);

				.result {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 29rpx;
					color: #FF3131;
					float: right;
				}
			}
		}
	}

	.noInfo {
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		color: #666;
		width: 750rpx;

		.ksp-icon {
			font-size: 100rpx;
			margin-bottom: 20rpx;
			// margin-bottom: ;
		}
	}
</style>